import React, { Component } from 'react'
import { Row, Col,Button,Modal,Input,message } from 'antd'
import units from './Units.module.css'
import {DeleteOutlined} from '@ant-design/icons';
import axios from 'axios';
import * as url from '../../util/api';
export default class Units extends Component {
    constructor(props){
        super(props)
        this.state = {
            // unitsList:[
            //     {goods_unit_id:1,goods_unit_name:'辆'},{goods_unit_id:2,goods_unit_name:'盒'},{goods_unit_id:3,goods_unit_name:'袋'},
            //     {goods_unit_id:4,goods_unit_name:'箱'},{goods_unit_id:5,goods_unit_name:'瓶'},{goods_unit_id:6,goods_unit_name:'双'},
            //     {goods_unit_id:7,goods_unit_name:'本'},{goods_unit_id:8,goods_unit_name:'件'},{goods_unit_id:9,goods_unit_name:'个'},
            // ]
        }
    }
    getUnits(){
        console.log('获取最新的计量单位')
        axios({
            url:'/api' + url.selectUnits,
            method:'post'
        }).then(res=>{
            let arr = res.data.data
            console.log(arr,'请求到的数据')
            this.setState({
                unitsList:arr
            })
        })
    }
    componentDidMount(){
        this.getUnits()
    }
    showNewUnitsModule = ()=>{
        this.setState({
            isShowNewUnits:true
        })
    }
    handelNewChange = (e)=>{
        let val = e.target.value.replace(/\s+/g,"")//获取属性值
        this.setState({
            newUnitsName:val
        })
    }
    confirmNew = ()=>{
        // 向服务器发起请求存储商品品牌
        if(this.state.newUnitsName === undefined || this.state.newUnitsName === ''){
            message.error('请输入单位名称！！！')
        }else{
             // 向服务器发起请求存储商品品牌
             console.log(this.state.newUnitsName,'新增的计量单位')
             let obj = {
                goodsUnitName:this.state.newUnitsName
             }
             axios({
                 url:'/api'+url.insertUnits,
                 method:'post',
                 data:obj
             }).then(res=>{
                 console.log(res,'新增的返回值')
                 if(res.data.data === '新增成功'){
                     message.success('新增计量单位成功！')
                     this.getUnits()
                     this.setState({
                        isShowNewUnits:false,
                        newUnitsName:''
                    }) 
                 }else{
                     message.error('新增计量单位失败！')
                 }
             })
            
        }
        
    }
    handleNewCancel = ()=>{
        this.setState({
            isShowNewUnits:false
        })
    }
    // 删除
    deleteUnits = (id)=>{
        // 向服务器发起请求删除计量单位
        console.log(id,999)
        let arr = JSON.parse(JSON.stringify(this.state.unitsList))
        let deleteId = 0
        for(let i = 0; i < arr.length; i++){
           if(arr[i].goodsUnitId === id){
                deleteId = arr[i].goodsUnitId
           }
        }
        let obj = {
            goodsUnitId:deleteId
        }
        axios({
            url:'/api' + url.deleteUnits,
            method:'post',
            data:obj
        }).then(res=>{
            console.log(res,'删除返回值')
            if(res.data.data === '删除商品计量单位成功'){
                message.success('删除成功！')
                this.getUnits()
            }else{
                message.error('有商品使用该计量单位，删除失败！')
            }   
        })
    }
    render() {
        return (
            <div className = {units.content}>
                <Row className = {units.btnBox}>
                    <Col span={24}>
                        <Button type="primary" className = {units.newClassify} onClick = {this.showNewUnitsModule}>新增</Button>
                        <Modal
                            title="新增计量单位"
                            visible={this.state.isShowNewUnits}
                            onOk={this.confirmNew}
                            cancelText = {'取消'}
                            okText = {'确定'}
                            onCancel={this.handleNewCancel}
                        >
                            <div>
                                <span className = {units.newTips}> <span>*</span>单位名称</span> 
                                <Input  className = {units.newUnitsName } 
                                value = {this.state.newUnitsName} onChange = {this.handelNewChange} />
                            </div> 
                        </Modal>
                    </Col>
                </Row>
                {this.state.unitsList?this.state.unitsList.map(item=><Row className = {units.unit} key={item.goodsUnitId}>
                <Col span={12}> <span className = {units.unitsName}>{item.goodsUnitName}</span></Col>
                <Col span={12}>
                    <div className = {units.operate}>
                        <button onClick = {()=>{this.deleteUnits(item.goodsUnitId)}} ><DeleteOutlined className = {units.operateIcon}  />删除</button>
                    </div> 
                </Col>
                </Row>):null}
                 
            </div>
        )
    }
}
